<template>
	<view>
		<view :class="system.isH5?'bg-1':'bg'" :style="`background-image: url(' ${WEBCONFIG?.fl} ');`">
			<uv-navbar title="" left-icon-color="#fff" @leftClick="$page.back" bgColor="none"></uv-navbar>
		</view>
		<view class="rounded-12  position-relative top--30 px-12 py-15  flex flex-column  grid-gap-8"
			style="background-color: #F6F7F8;">
			<text class="fs-17">选择套餐</text>

			<view class="  rounded-8 px-12 py-16 " @click="id=item.id;price=item.price"
				:class="{box:id==item.id,'bg-white border-white':id!=item.id}" v-for="(item,index) in list" :key="index"
				v-if="list.length>0">
				<view class="flex flex-x-space-between">
					<text class="fs-18">{{item.name}}</text>
					<text class="fs-17 fw-600 text-red-1">{{item.price}}元</text>
				</view>
				<view class="fs-14 text-grey-4 flex flex-x-space-between mt-12">
					<view class="rounded-30 border-grey-4 px-12 py-4 ">
						惊喜红包已减 <text class="text-blue-1"> {{(item.original_price - item.price).toFixed(2)}}</text>元
					</view>
					<text class="text-s">
						{{item.original_price}}
					</text>
				</view>
			</view>
			<y-empty v-else></y-empty>
		</view>
		<view class="mt-20 px-18 " v-if="list.length>0" @click="">
			<view class="border-blue-1 fs-18 py-8 text-center text-blue-1 rounded-4"
				@click="$page.open('/pages/package/order')">
				购买记录
			</view>
		</view>
		<view
			class="pb-safe-area bg-white position-fixed bottom-0 right-0 left-0 px-12 flex flex-x-space-between flex-y-center">
			<text class="text-blue-1 fs-20 fw-600">￥{{price}}</text>
			<view class="px-43 fs-18 py-9 bg-blue-1 rounded-4 text-center text-white block" @click="createOrder()">
				提交订单
			</view>
		</view>
		<y-loading v-if="show"></y-loading>
	</view>
</template>

<script setup>
	import system from "@/utils/system";
	import { $http, $page, $tool } from "@/utils";
	import { pay } from '@/utils/pay'
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useWebConfigStore, useRefs, useUserStore } from "@/stores/index";
	const list = ref([])
	const id = ref(0)
	const price = ref(0)
	const show = ref(false)
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	onLoad(() => {
		console.log(111)
		getList()
	})
	const getList = () => {
		$http.get('Order/packageList').then(res => {
			list.value = res.data
		})
	}

	const createOrder = () => {
		if (id.value == 0) {
			$tool.toast('请选择套餐')
			return;
		}
		let source = 'weixin'
		// #ifdef MP-TOUTIAO
		source = 'douyin'
		// #endif

		// #ifdef H5
		let ua = navigator.userAgent.toLowerCase();
		if (ua.indexOf('micromessenger')!=-1) {
			source = 'official'
		} else {
			$tool.toast('请在微信公众号中支付');
			return;
		}
		// #endif

		show.value = true
		$http.post('Order/createPackageOrder', { id: id.value, source: source }).then(res => {
			let data = res.data
			show.value = false
			pay(source, data).then(res=>{
				setTimeout(()=>{
				$page.redirect('/pages/package/order')
				},300)
			}).catch(() => {
				$tool.toast('支付失败')
			})
		}).catch(e => {
			show.value = false
		})
	}
</script>

<style scoped>
	.bg {
		height: 432rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	.bg-1 {
		height: 350rpx;
		background-size: cover;
		overflow: hidden;
		background-position: bottom center;
		background-repeat: no-repeat;
		background-size: 100% 133%;
	}

	.box {
		background-color: ##ECF8FF !important;
		border: 2rpx solid #3D5CFF !important;
	}
</style>